<template>
  <div class="yzh-basic" v-if="formData">
    <div class="flex justify-between pb-3">
      <TitleName
        title="回款计划"
        icon="i-carbon-bookmark-filled"
        class="title"
      ></TitleName>
    </div>

    <el-table :data="formData" border stripe>
      <el-table-column prop="qc" label="回款期次">
        <template #default="scope">
          <span>第{{ scope.row.period }}期(共{{ scope.row.allPeriod }}期)</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="计划回款金额">
        <template #default="scope">
          <span>¥{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="repaymentPrice" label="已回款金额">
        <template #default="scope">
          <span>¥{{ scope.row.repaymentPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="repaymentPlanDate" label="计划回款日期">
        <template #default="scope">
          <div>
            {{ parseTime(scope.row.repaymentPlanDate, '{y}-{m}-{d}') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="回款状态">
        <template #default="scope">
          <dict-drop :options="repayment_status" :value="scope.row.status">
            <span v-if="scope.row.excessPrice"
              >(超额¥{{ scope.row.excessPrice }})</span
            >
          </dict-drop>
        </template>
      </el-table-column>
      <!-- <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  icon="Select"
                  @click="handleContinue(scope.row)"
                  v-hasPermi="['salesManage:indentManage:continue']"
                  >跟进</el-button
                >
              </template>
            </el-table-column> -->
    </el-table>

    <div v-if="countData" class="text-right pt-2">
      订单总额：<span class="text-blue-500"
        >{{ countCrudData.orderPrice }}元</span
      >
      总计划期次：<span class="text-blue-500"
        >{{ countCrudData.allPeriod }}期</span
      >总回款占比：<span class="text-blue-500"
        >{{ countCrudData.repaymentProportion }}%</span
      >
      总回款金额：<span class="text-blue-500"
        >{{ countCrudData.repaymentPrice }}元</span
      >
    </div>
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    /> -->
  </div>
</template>
<script setup name="repaymentPlan">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useCommonStore from '@/store/modules/common'
const router = useRouter()
const route = useRoute()
const props = defineProps({
  dataList: {
    type: [Object, Array],
    require: true
  },
  countData: {
    type: [Object, Array],
    require: false
  }
})
const { proxy } = getCurrentInstance()
const commonStore = useCommonStore()
const { repayment_status, pay_type, settle_type } = proxy.useDict(
  'repayment_status', //回款状态
  'pay_type', //付款方式
  'settle_type' //结算方式
)
const data = reactive({
  formData: [],
  countCrudData: {
    allPeriod: '-', //总期次
    orderPrice: '-', //订单金额
    repaymentProportion: '-', //回款占比
    repaymentPrice: '-' //回款金额
  },
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10
  }
})
let { formData, countCrudData, total, queryParams } = toRefs(data)

watchEffect(() => {
  console.log('回款计划==》', props.dataList)
  if (props.dataList) {
    formData.value = props.dataList
  }
  if (props.countData) {
    countCrudData.value = props.countData
  }
})
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
}
</style>
